@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-black-webfont.eot');
    src: url('../fonts/lato/lato-black-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-black-webfont.woff') format('woff'), url('../fonts/lato/lato-black-webfont.ttf') format('truetype'), url('../fonts/lato/lato-black-webfont.svg#latoblack') format('svg');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-bold-webfont.eot');
    src: url('../fonts/lato/lato-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-bold-webfont.woff') format('woff'), url('../fonts/lato/lato-bold-webfont.ttf') format('truetype'), url('../fonts/lato/lato-bold-webfont.svg#latobold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-bolditalic-webfont.eot');
    src: url('../fonts/lato/lato-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-bolditalic-webfont.woff') format('woff'), url('../fonts/lato/lato-bolditalic-webfont.ttf') format('truetype'), url('../fonts/lato/lato-bolditalic-webfont.svg#latobold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-italic-webfont.eot');
    src: url('../fonts/lato/lato-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-italic-webfont.woff') format('woff'), url('../fonts/lato/lato-italic-webfont.ttf') format('truetype'), url('../fonts/lato/lato-italic-webfont.svg#latoitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-light-webfont.eot');
    src: url('../fonts/lato/lato-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-light-webfont.woff') format('woff'), url('../fonts/lato/lato-light-webfont.ttf') format('truetype'), url('../fonts/lato/lato-light-webfont.svg#latolight') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/lato-regular-webfont.eot');
    src: url('../fonts/lato/lato-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato/lato-regular-webfont.woff') format('woff'), url('../fonts/lato/lato-regular-webfont.ttf') format('truetype'), url('../fonts/lato/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Flat-UI-Icons';
    src: url('../fonts/Flat-UI-Icons.eot');
    src: url('../fonts/Flat-UI-Icons.eot?#iefix') format('embedded-opentype'), url('../fonts/Flat-UI-Icons.woff') format('woff'), url('../fonts/Flat-UI-Icons.ttf') format('truetype'), url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{


}
.gradiant{
    background: #f4f4f4; /* Old browsers */

    /* IE9 SVG, needs conditional override of 'filter' to 'none' */

    background: url();

    background: -moz-linear-gradient(top,  #f4f4f4 0%, #ffffff 50%, #f4f4f4 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(50%,#ffffff), color-stop(100%,#f4f4f4)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  #f4f4f4 0%,#ffffff 50%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  #f4f4f4 0%,#ffffff 50%,#f4f4f4 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  #f4f4f4 0%,#ffffff 50%,#f4f4f4 100%); /* IE10+ */

    background: linear-gradient(to bottom,  #f4f4f4 0%,#ffffff 50%,#f4f4f4 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-8 */
    
/*    background-image: url(../images/background.png);
    background-repeat: repeat;*/
    
}

.fill{
    padding: 0 5px;
    
    background: #f4f4f4; /* Old browsers */
    border-left: #ffffff solid;

    /* IE9 SVG, needs conditional override of 'filter' to 'none' */

    background: url();

    background: -moz-linear-gradient(top,  #f4f4f4 0%, #ffffff 50%, #f4f4f4 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(50%,#ffffff), color-stop(100%,#f4f4f4)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  #f4f4f4 0%,#ffffff 50%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  #f4f4f4 0%,#ffffff 50%,#f4f4f4 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  #f4f4f4 0%,#ffffff 50%,#f4f4f4 100%); /* IE10+ */

    background: linear-gradient(to bottom,  #f4f4f4 0%,#ffffff 50%,#f4f4f4 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-8 */


}
#header{
    background: black;
    height:38px;
    position:relative;
}


#socialText{
    font-size: 18px;
    padding:5px;
    float: left;
    color: white;
    font-weight: bold;
}
#social ul{
    list-style:none;
    padding:5px 0 0 0;
    float:left;
}
#color li,#social ul li{
    float:left;
    display:block;
    width:30px;
    height:30px;
    margin:1px;



}
#color li a,#social ul li a{
    border-radius:3px;
    cursor:pointer;
    display:block;
    width:30px;
    height:30px;


}
.width-container{
    background-color: black;
}
#social ul li a.facebook{
    background: url(../images/social.png);
}
#social ul li a.facebook:hover{
    background: url(../images/color-social.png);
}
#social ul li a.google{
    background: url(../images/social.png) 127px 0;
}
#social ul li a.google:hover{
    background:  url(../images/color-social.png) 95px 0;
}
#social ul li a.twitter{
    background: url(../images/social.png) 92px 0;
}
#social ul li a.twitter:hover{
    background: url(../images/color-social.png) 63px 0;
}
#social ul li a.linkedin{
    background: url(../images/social.png) 61px 0;
}
#social ul li a.linkedin:hover{
    background: url(../images/color-social.png) 30px 0;
}

#color li a.red{
    background:url(../images/color.png);

}
#color li a.blue{
    background:url(../images/color.png) 94px 0px;

}
#color li a.green{
    background:url(../images/color.png) 60px 0px;

}
#color li a.yellow{
    background:url(../images/color.png) 30px 0px;

}

#color{
    position:relative;
    list-style:none;
    padding:1px 1px;
    right:-44%;

}
#colorText{
    position:relative;
    right:35%;
    float: right;
    font-size: 18px;
    padding:5px;
    color: white;
    font-weight: bold;

}
#nav{
    background:#ededee;
}
#nav .col-md-12{
    padding:0px 2px;
}

#nav,#header{
    width:99.8%;
    margin-left:.6px;
}
#logo{
    position:absolute;
    right:5%;
    z-index:2;
}
.nav-pills{
    padding:.5% 2%;
    border-bottom:2px solid #a2a0a0;
    border-top:2px solid #a2a0a0;
    margin:2% 0;
    background: whitesmoke;
}

.nav-pills>li>a:hover {
    background-color: #d5d5d5;
}
.carousel-inner img{
    width:100%;

}
#register{
    padding:2% 1%;
    padding-bottom: 4%;

    background-color: #d5d5d5;

}
#register span{
    word-wrap: break-word;

}
.indexsider .carousel-inner img{
    width:100%;
    height:319px;
}
#register .btn{
    float:right;

}
h1{
    padding-bottom:1%;
    margin-bottom:2%;
}
#services .caption{
    text-align:center;
}
#services .caption h3{
    color:#1c1c1d;
}
#services .caption h3+p{
    color:#415361;
    height:20%;
}

.col-md-8 ul{
    list-style:none;
}
.col-md-8 ul li{
    padding-left:2%;
    height: 65px;
    margin-top: 10px;
}
.col-md-8 ul li.week{
    border-left:#2e75b6 solid 5px;
}
.col-md-8 ul li.month{
    border-left:#4dc081 solid 5px;
}

.col-md-8 ul li span{
    float:left;
    font-size:45px;
    font-weight:bold;
    margin-right:2%;
    color:#415361;
}
.col-md-8 ul li p h4{color:#c1c1c1;}
.col-md-8 ul li p p{color:#415361;}
.col-md-8 ul li span+p{
    padding-top:.1%;
}
#poll a{
    margin:1%;
}

/*
=============================================== 05. FOOTER STYLES ===============================================
*/
footer a{
    color:#CCC;
}
footer a:hover {color:#d3d3d3}
#footer-widgets .width-container {
    padding:36px 0px 25px 0px;

}
footer #copyright {
    padding:10px 0px 10px 0px;
    color: white;
}
footer #footer-widgets .social-icons {float:none; padding-top:15px;}
footer .social-icons {float:right; padding-top:28px; margin-left:0px; }
footer .social-icons a { margin-bottom:18px; -webkit-transition: none; -moz-transition: none; transition:none;}
footer ul {margin:-1px 0px 0px 0px; padding:0px; list-style:none;}
footer ul li {
    margin:0px 0px 0px 0px;
}
#footer-widgets .widget {float:left; width:30%; margin-left:1%; margin-right:1%;}

footer{
    margin-top: 2%;
    background:#ededee;
}
#footer-widgets{
    color:#f4f4f4;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px

}
#menu-main-navigation-1 li a{
    color:#f4f4f4;
    cursor:pointer;
}
#subscribe{
    background:#CCC;
    color: #2C2C2C;
}
/*=================================calendar ==================================*/
#calendar{
    margin-left: auto;
    margin-right: auto;
    font-family: 'Lato', sans-serif;
}
#calendar_weekdays div{
    display:inline-block;
    vertical-align:top;
}
#calendar_content, #calendar_weekdays, #calendar_header{
    position: relative;
    overflow: hidden;
    float: left;
    z-index: 10;
}
#calendar_weekdays div, #calendar_content div{
    overflow: hidden;
    text-align: center;
    background-color: #FFFFFF;
    color: #787878;
}
#calendar_content{
    -webkit-border-radius: 0px 0px 8px 8px;
    -moz-border-radius: 0px 0px 8px 8px; 
    border-radius: 0px 0px 8px 8px;
}
#calendar_content div{
    float: left;
}
#calendar_content div:hover{
    background-color: #d5d5d5;
}
#calendar_content div.blank{

    padding: 14px 0px;
}
.col-md-8 ul li.today{
    border-left:#cc0000 solid 5px;
}
#day h4, #dayBefore h4, #dayAfter h4 {
    font-size: 20px;
    margin-bottom: 0px;
    padding-bottom: 2px;
}

#day .btn, #dayBefore .btn, #dayAfter .btn {
    font-size: 20px;
    margin-bottom: 0px;
    padding: 0px;
}
#calendar_header, #calendar_content div.today{
    zoom: 1;
    filter: alpha(opacity=80);
    opacity: 0.8;

}
#calendar_header, #calendar_content div.today{
    zoom: 1;
    filter: alpha(opacity=80);
    opacity: 0.8;

}
#calendar_content .btn{
    padding: 0px;
}
#calendar_content div.today{
    color: #FFFFFF;
}
#calendar_header{
    width: 100%;
    text-align: center;
    padding:0 0 0 10%;
    -webkit-border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px; 
    border-radius: 8px 8px 0px 0px;
}
#calendar_header h1{
    font-size: 1.7em;
    font-weight: bold;
    color:#FFFFFF;
    float:left;
    width:70%;
    margin:0;
    margin-top:10px;
    border:none;
}
i[class^=glyphicon]{
    background:#f1f1f1;
    float: left;
    padding:10px 0px;
    margin-top:15px;
    border-radius:5px;
    cursor:pointer;
}
/*==============================news slider=================================*/
#collection .carousel{
    height:210px;
}
#collection .carousel-control{
    background:none;
    height:160px;
}
#collection .carousel-indicators{
    top:210px;
}

#collection .slide .carousel-inner{
    width:100%;
    height:100%;
}
#collection .slide .item{
    width:100%;
    height:250px;
    background:none;
}

#collection .slide .item img{
    width:100%;
    height:210px;
}
#collection .slide .carousel-caption {

    right: 0;
    left: 0;
    padding-top: 2%;
    padding-left: 2%;
    padding-bottom: 2%;
    background-color: rgba(255, 255, 255, 0.8);;
    color: black;
    text-shadow: none;


}
#collection .slide .carousel-caption  h4{
    color: black;
    font-weight: bold;
    margin: 0 0;
    padding-top: 0;
    text-align: left;
}
#collection .slide .carousel-caption  p{
    text-align: left;

}
/*================================================*/
.caption h3 +p{
    height:142px;
    overflow:hidden;
}
.modal-body img{
    width:100%;


}
.modal-body img{
    float:left;
    clear:right;
    margin:1%;
}
/*===============================================*/
div.container-fluid
{

    padding: 0;
    margin: 5px;
    font-family: 'Lato';
    font-size: 18px;
    margin:auto;
}
section.main_header
{
    margin-left: 1.6%;
    margin-right:1.6%;
    height: 40px;
}
section.main_header h1
{
    padding-left: 20px;
    font-weight:bold;
}

/*------GET IN TOUCH & SEND US A MESSSAGE------*/
section.left_right 
{
    width: 100%;
    height: 70px;
}
section.left_right div h2
{
    width: 50%;
    float: left;
    text-align: center;
    color:#615545;
    font-family:fanwood;
    font-weight:bold;
}

/*---------Body Section----------*/
section.left_section
{
    width: 40.5%;
    float: left;
    margin-top: 20px;
    margin-left:20px;
}
section.right_section
{
    width: 46.5%;
    float: right;
    margin-top: 20px;
    margin-right:20px;
    padding-bottom:60px;
}
section.right_section div#contact_form form.form-horizontal div span#name_warning,span#email_warning,span#subject_warning,span#message_warning
{
    font-weight:bold;
    text-shadow:5px 2px 2px #FFFF66;
}
section.left_section div.address p
{
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    font-family:fanwood;
    font-size:15px;
}
section.left_section div.map
{
    width: 400px;
    height: 450px;
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: 20px;
}
section.left_section div.map a
{
    font-weight:bold;
    text-align:left;
}

/*-----Static Page------*/
section.update
{
    width: 50%;
    height: 40px;
    margin-left: 25%;
    margin-right: 25%;
    margin-top:40px;
    height:75%;
}

.js-video {
    height: 0;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.js-video.widescreen {
    padding-bottom: 60.25%;
}

.js-video embed, .js-video iframe, .js-video object, .js-video video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
#osCarousel .carousel-control.right{
    right : 0;
    left : auto;
    background-image: none;
}
.carousel-control {
    padding-top:4%;
    width:5%;
}
/*==================belal=================*/
#secRow,#firstrow{
    width:100%;
    margin:0;
}
#belal_c{
    margin:0 auto;
    width:90%;

}
#map_canvas {
    height: 100px;
    width: 550px;
    position: relative;
    padding-bottom: 50%; // This is the aspect ratio
    overflow: hidden;
}
#map_canvas .gm-style {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
#getDirections {
    margin-top: 2%;
}

.progress {

    margin-bottom: 10px;

}

#pollDisplay h4{
    margin-bottom: 4px;
}
.progress .red{
    background-color: #cc0000;
}
.progress .blue{
    background-color: #2e75b6;
}
.progress .green{
    background-color: #4dc081;
}
.progress .yellow{
    background-color: #ffc000;
}
#slider .slide .carousel-caption {
    left: 5%;
    padding-bottom: 5%;
    right: 25%;
}
#slider .slide .carousel-caption  h1{
    color: white;

    border-bottom: 0px;
    font-weight: bold;
    text-align: left;
    font-size: 60px;
}

#slider .slide .carousel-caption  p{
    color: white;

    border-bottom: 0px;
    font-weight: bold;
    margin: 0 0;
    padding-top: 0;
    text-align: left;
}



#slider .carousel-control.left{
    background-image: none;
}

#slider .carousel-control.right{
    background-image: none;
}

#scrollUp {
    bottom: -10px;
    right: 20px;
    width: 70px;
    height: 50px;
    padding: 10px 5px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    color: #ffffff;-webkit-box-shadow:0 0px 2px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 0px 2px 1px rgba(0,0,0,0.2);box-shadow:0 0px 2px 1px rgba(0,0,0,0.2);background-color:#000000;
    background-image: -moz-linear-gradient(top, #111B19, #000000);
    background-image: -webkit-gradient(linear, 0 0, 0 100% , from(#111B19), to(#000000));
    background-image: -webkit-linear-gradient(top, #111B19, #000000);
    background-image: -o-linear-gradient(top, #111B19, #000000);
    background-image:linear-gradient(to bottom, #111B19,#000000);
    background-repeat: repeat-x; -webkit-transition: bottom 150ms linear; -moz-transition: bottom 150ms linear;
    transition: bottom 150ms linear
}
#scrollUp:hover {
    bottom: 0px
}

#nav .navbar-right{
    margin-right: 20%

}

.passStrengthify{
    float: right;
}

#login .dropdown-menu {
    min-width: 230px;
}

#login .row {
    margin-left: 0;
}
#login a:focus {
    background-color: white;
}
#login a {
    color: black;
}

#socialRegistration {
    text-align: center;
    border-left: 2px solid black;
    height: 330px;
    margin-left: 5%
}

#menuWelcome {
    list-style-type: none;
    padding-top: 5px;
}
#menuWelcome .glyphicon{
    left: 5px;
    top: 5px;
}

ol.breadcrumb {
    background-color:  white;
    margin-bottom: 0px;
}
#testimonial .carousel-inner{
    margin-left: 5%;
}
#testimonial .carousel-inner .item img {
    width:100%;
    height:100%;

}
#testimonial .item .thumbnail {
    margin-bottom:0;

}
#testimonial .carousel-control.left, .carousel-control.right {
    background-image:none !important;
}
#testimonial .carousel-control {
    background:#ddd;
    color:#999;
    padding: 12px 0;
    width:26px;
    top:auto;	
    left:auto;
    bottom:0;
    opacity:1;
    text-shadow:none;
}
#testimonial .carousel-control.right {
    right:10px;
}

#testimonial .carousel-control.left {
    right: 40px;
}

#testimonial .carousel-control .glyphicon-chevron-left {
    left: 10%;
    top: 5%
}

#testimonial .carousel-control .glyphicon-chevron-right {
    right: 20%;
    top: 5%
}
#testimonial blockquote{
    border-left: 0px;
}

#newsCarousel .carousel-caption {
    left:0;
    right:0;
    bottom:0;
    text-align:left;
    padding:10px;
    background: rgba(255, 255, 255, 0.8);
    text-shadow:none;

}

#newsCarousel .list-group {
    position:absolute;
    top:0;
    right:0;
}
#newsCarousel .list-group-item {
    border-radius:0px;

    cursor:pointer;
}
#newsCarousel .list-group .active {
    background-color:#eee;	
}
#newsCarousel .carousel-control.left{
    background-image: none;
}
#newsCarousel p{
    color: black;
}

#newsCarousel .col-md-8{
    padding: 0;
}
#newsCarousel .item>img{
    height: 430px;
}

#article{
    padding-bottom: 10px;
    border-bottom: 2px dashed #e5e5e5
}

.dates h2{
    width:100%;
    text-align: center;
    font-size: 80px;
    font-weight: bold;
    color: #415361;
    margin-bottom: 0;
    
}
.dates h3{
    width:100%;
    text-align: center;
    font-size: 60px;
    font-weight: bold;
    color: #415361;
    margin-top: 0;
}
.dates h4{
    width:100%;
    text-align: center;
    font-size: 30px;
    
}
.monthRed{
    color: #cc0000;
}
.monthBlue{
    color: #2e75b6;
}
.monthGreen{
    color: #4dc081;
}
.monthOrange{
    color: #ffc000;
}
.vertical .carousel-inner {
  height: 100%;
}

.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
     -moz-transition: 0.6s ease-in-out top;
      -ms-transition: 0.6s ease-in-out top;
       -o-transition: 0.6s ease-in-out top;
          transition: 0.6s ease-in-out top;
}

.carousel.vertical .active {
  top: 0;
}

.carousel.vertical .next {
  top: 400px;
}

.carousel.vertical .prev {
  top: -400px;
}

.carousel.vertical .next.left,
.carousel.vertical .prev.right {
  top: 0;
}

.carousel.vertical .active.left {
  top: -400px;
}

.carousel.vertical .active.right {
  top: 400px;
}

.carousel.vertical .item {
    left: 0;
}
